/** @jsxImportSource @emotion/react */
import React from 'react';
import { jsx, Global, css } from "@emotion/react";
import {AlertContent, } from "./Alert";
import { Theme } from "./Theme";
import { useTheme, ThemeProvider } from "./Theme/Providers";
import { ToastContainer, toast ,ToastPosition } from 'react-toastify';
import {ToastOptions, TypeOptions,} from "react-toastify/dist/types";
import 'react-toastify/dist/ReactToastify.css';


//这个是针对ReactToastify.css 内部消息父辈div的样式 .Toaster__message-wrapper {padding: 8px;}
const toastStyles = css`
  .Toastify__toast-container {
        //width: var(--toastify-toast-width);
    width: fit-content
  }
`;


interface RenderArgs {
  id: string | number;
  onClose: () => void;
}

interface Toast {
  // keyof typeof  Position;
  position?:  ToastPosition;
  duration?: number | null;
  title?: string;
  subtitle?: string | React.ReactNode;
  theme?: Theme;
  intent?: TypeOptions;
  render?: (options: RenderArgs) => React.ReactNode;
  /**消息附加的主区域： 支持链接可点击
   * */
    content?: React.ReactNode;
}

/** 类Hook的 需要用到jsx, css的场合,不同一般地Hook。
 * We export toast as a hook because it allows us to consume
 * the current theme context that it's in and pass that
 * onto our render function
 报错来源： ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17.
 【配套】 必须在APP顶级组件中 再配个<ToastContainer />才能生效。
 */
// @deprecated      //请直接使用"react-toastify":最新版本,用法不兼容了，老版本不支持Next.js；等待删除
export function useToast() {
  const theme = useTheme();

  function notify({
        position ='bottom-center',
        duration,
        render,
        title,
        subtitle,
        intent,
        content
  }: Toast) {
            //适配旧的包接口函数参数
    const options = {
      position,
      autoClose: duration,
      type: intent,
    } as ToastOptions;

    //宽度已经被上一级的 react-toastify包 /ReactToastify.css 文件 --toastify-toast-width: 320px;所限定了最大宽度！！
    //俩条路都是 （return React.ReactNode）纯字符创也算是: React.ReactNode;
    if (render) {
      return toast(
        ({ closeToast: onClose, toastProps:{toastId:id } }) =>
            (
                <React.Fragment>
                  <Global styles={toastStyles} />
                  <ThemeProvider theme={theme}>
                    {render({ onClose, id })}
                  </ThemeProvider>
                </React.Fragment>
            ) as React.ReactNode
        , options
      );
    }

    //普通的 export type MessageProp = React.ReactNode | ((callback: MessageCallback) => React.ReactNode) | string;
    toast(
      ({ closeToast: onClose, toastProps:{toastId:id } }) =>
              (
            <React.Fragment>
              <Global styles={toastStyles} />
              <ThemeProvider theme={theme}>
                <AlertContent
                  id={String(id)}
                  title={title}
                  subtitle={subtitle}
                >
                  {content}
                </AlertContent>
              </ThemeProvider>
            </React.Fragment>
          ) as React.ReactNode
          , options
    );
  }
      //【无法显示】必须配套 在APP顶级组件中 再加个<ToastContainer />才能显示。
  return notify;
}


export { ToastContainer }
